<template>
  <div class="store">
    <div class="head">
      <h2>店铺管理</h2>
      <p><el-button @click="clickedit" type="primary">保存</el-button></p>
    </div>
    <div class="store-main">
      <div class="name">
        <div style="margin-right: 10px">店铺名称</div>
        <div class="content">
          <el-input v-model="shopinfo.name"></el-input>
        </div>
      </div>
      <div class="name">
        <div style="margin-right: 10px">店铺公告</div>
        <div class="content">
          <el-input type="textarea" v-model="shopinfo.bulletin" :rows="10">
          </el-input>
        </div>
      </div>
      <div class="name">
        <div style="margin-right: 10px">店铺头像</div>
        <div class="content">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/shop/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div class="name">
        <div style="margin-right: 10px">店铺照片</div>
        <div class="content">
          <el-upload
            action="http://127.0.0.1:5000/shop/upload"
            list-type="picture-card"
            :file-list="fileimages"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
      <div class="name">
        <div style="margin-right: 10px">配送费</div>
        <div class="content">
          <el-input v-model="shopinfo.deliveryPrice"></el-input>
        </div>
      </div>

      <div class="name">
        <div style="margin-right: 10px">配送时间</div>
        <div class="content">
          <el-input v-model="shopinfo.deliveryTime"></el-input>
        </div>
      </div>

      <div class="name">
        <div style="margin-right: 10px">配送描述</div>
        <div class="content">
          <el-input v-model="shopinfo.description"></el-input>
        </div>
      </div>

      <div class="name">
        <div style="margin-right: 10px">店铺评分</div>
        <div class="content">
          <el-input disabled v-model="shopinfo.score"></el-input>
        </div>
      </div>

      <div class="name">
        <div style="margin-right: 10px">销量</div>
        <div class="content">
          <el-input disabled v-model="shopinfo.sellCount"></el-input>
        </div>
      </div>
      <div class="name">
        <div style="margin-right: 10px">添加活动</div>
        <div class="content">
          <el-input v-model="addactive"></el-input>
        </div>
        <el-button
          style="margin-left: 10px"
          size="mini"
          @click="clickadd"
          type="primary"
          >添加活动</el-button
        >
      </div>
      <div class="name">
        <div style="margin-right: 10px">活动</div>
        <div class="content">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="item in shopinfo.supports"
              :label="item"
              :key="item"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="name">
        <div style="margin-right: 10px">营业时间</div>
        <div class="content">
          <el-time-picker
            is-range
            v-model="shopinfo.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $_shopInfo, $_shopedit } from "@/apis/store";
import { getChinatime } from "@/utils/utils";
export default {
  created() {
    this.reqtable();
  },
  data() {
    return {
      fileimages: [], //照片墙的文件数组

      shopinfo: {}, //渲染的店铺数据
      checkList: [], //选中的活动
      imageUrl: "", //回显的头像
      addactive: "", //添加的活动
      newavatar: "", //新的头像图片名
    };
  },
  methods: {
    reqtable() {
      $_shopInfo().then((res) => {
        this.shopinfo = res.data.data;
        this.imageUrl = this.shopinfo.avatar;
        let newarr = [];
        for (let imgurl of this.shopinfo.pics) {
          newarr.push({
            name: imgurl.substring(imgurl.lastIndexOf("/") + 1),
            url: imgurl,
          });
        }
        this.fileimages = newarr;
      });
    },
    clickadd() {
      this.shopinfo.supports.push(this.addactive);
    },

    handleAvatarSuccess(res, file) {
      this.newavatar = res.imgUrl;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      let types = ["image/jpeg", "image/png", "image/webp"];
      const isJPG = types.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG、png、webp 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleSuccess(_, file, filelist) {
      this.filelist = filelist;
    },
    handleRemove(file, filelist) {
      this.filelist = filelist;
    },

    clickedit() {
      let params = JSON.parse(JSON.stringify(this.shopinfo));

      let pics = this.filelist.map((obj) =>
        obj.response ? obj.response.imgUrl : obj.name
      );
      params.avatar = this.newavatar; //头像
      params.pics = JSON.stringify(pics); //图片墙的所有图片名称(字符串)
      params.supports = JSON.stringify(this.checkList); //活动数组(字符串)
      params.date = JSON.stringify(
        params.date.map((timestr) => getChinatime(timestr))
      ); //营业时间数组(字符串)
      $_shopedit(params).then((res) => {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      });
    },
  },
};
</script>

<style lang='less' scoped>
.store {
  padding: 10px;
  background-color: #fff;

  .head {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #bdbdbd;
  }
  .store-main {
    margin: 20px;

    .name {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .content {
        width: 500px;
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
  }
}
</style>